<template>
  <div class="box">
    <div class="left">
      <img :src="workDetail.coverImg" alt="" />
    </div>
    <div class="right">
      <h1>{{ workDetail.title }}</h1>
      <p>{{ workDetail.desc }}</p>
      <div class="avart">
        <UserOutlined :style="{ fontSize: '20px' }"></UserOutlined>
        <span style="margin-left: 10px; color: black"
          >该模板由{{ workDetail.author }}创作</span
        >
      </div>
      <div class="qrcode" v-if="workDetail.coverImg">
        <p style="color: black; margin-left: 10px; margin-bottom: 0px">
          扫一扫手机预览
        </p>
        <a-qrcode :value="workDetail.coverImg" />
      </div>
      <div class="btn">
        <a-button
          size="large"
          type="primary"
          @click="goTemplateEditor"
          :loading="isLoading"
          >{{ isLoading ? '创建中' : '使用模板' }}</a-button
        >
        <a-button
          size="large"
          @click="downLoadFileHandle"
          :loading="fileLoading"
          >下载图片海报</a-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'TemplateDetail',
})
import { copyWorkTemplateAPI, getWorkDtailAPI } from '@/request/modules/work'
import type { IWorkDetail } from '@/request/types/workType'
import { UserOutlined } from '@ant-design/icons-vue'
import { onMounted, ref, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import useGlobalStore from '@/store/modules/globalStore'
import { downLoadFile } from '@/helper'
const { isLoading } = toRefs(useGlobalStore())
const router = useRouter()
const route = useRoute()
const workId = route.params.id as string
const goTemplateEditor = async () => {
  const result = await copyWorkTemplateAPI(workId)
  const word_Id = result.data?.data?._id || ''
  router.push({
    name: 'editor',
    params: {
      id: word_Id,
    },
  })
}
const workDetail = ref<Partial<IWorkDetail>>({})
const getWorkDetailHandle = async () => {
  const result = await getWorkDtailAPI(workId)
  workDetail.value = result.data.data
}
const fileLoading = ref(false)
const downLoadFileHandle = async () => {
  if (workDetail.value) {
    fileLoading.value = true

    await downLoadFile(
      workDetail.value.coverImg as string,
      workDetail.value.title
    )
    console.log(123123)

    fileLoading.value = false
  }
}
onMounted(() => {
  getWorkDetailHandle()
})
</script>

<style scoped lang="scss">
.box {
  width: 50%;
  min-height: 80vh;

  margin: 50px auto;
  display: flex;

  .left {
    width: 375px;

    img {
      width: 100%;
    }
  }
  .right {
    width: 360px;
    padding: 20px;
    color: rgb(163, 155, 155);
    h1 {
      font-size: 23px;
      margin-bottom: 20px;
      color: black;
    }
    p {
      margin: 20px 0px;
      font-size: 13px;
      color: rgb(121, 119, 119);
    }
    .qrcode {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin: 20px 0px;
    }
    .btn {
      display: flex;
      margin-top: 20px;
      button {
        margin-right: 20px;
        border-radius: 20px;
      }
    }
  }
}
</style>
